<template>
	<view class="pageContainer">
		<!-- 日历控件 -->
		<view>
			<button @click="isShow=!isShow">唤醒/隐藏日历</button>
			<calendar :isShow="isShow"  :time='nowTime' @change="changeTime"></calendar>
			<button v-show="isShow" @click="confirmData">确认日历数据</button>
		</view>
		<!-- 文字解析 -->
		<view class="module">
			<view class="title needLine">
				<text>肠态表现解析</text>
				<view class="subOption">
					<text :class="{'isActive':item.active}" @click="changeSub(item)"
						v-for="item in subOption" :key="item.index">{{item.value}}</text>
				</view>
			</view>
			<view class="content">
				<text>{{subOption[explainIndex].explain}}</text>
			</view>
		</view>
		<!-- 记录明细 -->
		<view class="module">
			<view class="title">
				<text>记录明细</text>
				<image src="" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import calendar from '../components/calendar.vue'
	export default {
		data() {
			return {
				nowTime: new Date(),
				isShow: false,
				calendarData: [],
				subOption: [
					{
						index: 0,
						active: true,
						value: '近7天',
						explain: '1测试数据测试数据测试数据测试数据测试数据测试数据测'
					},
					{
						index: 1,
						active: false,
						value: '近14天',
						explain: '2测试数据测试数据测试数据测试'
					},
					{
						index: 2,
						active: false,
						value: '近30天',
						explain: '3测试数据测试数据测试数据测试数据测试数据测试数据测测试数据测试数据测试数据测试数据测试数据测试数据测'
					}
				],
				explainIndex: 0
			}
		},
		components: {calendar},
		methods: {
			// 日历模块-数据切换
			changeTime(data) {
				this.calendarData = data
			},
			// 日历模块-数据确认
			confirmData() {
				if (this.calendarData.length > 0) {
					let dateArr = this.calendarData.map(inner => inner.showTime)
					uni.showModal({
						title: '提示',
						content: `当前所选数据：${dateArr.join(',')}`
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '暂无已选数据'
					})
				}
			},
			// 其他模块-数据切换
			changeSub(item) {
				this.subOption.map(inner => {
					inner.active = inner.index == item.index
				})
				this.explainIndex = item.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageContainer{
		width: 100%;
		background: linear-gradient(to bottom, #09356D, #0c4488);
		padding: 30rpx;
		>view{
			margin-bottom: 30rpx;
		}
		.module{
			width: 100%;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				>text{
					font-size: 28rpx;
					font-weight: bold;
				}
				image{
					width: 10rpx;
					height: 10rpx;
					background-color: #012D67;
				}
				.subOption{
					display: flex;
					text{
						padding: 4rpx 15rpx;
						font-size: 26rpx;
						color: #aab6c1;
						&.isActive{
							color: #15273e;
							background-color: #fccc37;
							border-radius: 30rpx;
						}
					}
				}
				&.needLine{
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #e9e9e9;
				}
			}
			.content{
				padding: 10rpx 0;
				text-align: justify;
			}
		}
	}
</style>
